<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>
<body>
    <textarea
      id="area"
      style="width: 400px; height: 200px; border: solid 2px pink"
    >
    </textarea></br>
    <button class="submit" onclick="Add()">发布评论</button>
    <ul id="list">
       
    </ul>
    <script>
        function Add(){
            var area=document.querySelector("#area");
            var list=document.querySelector('#list');
            list.innerHTML+=` <li><span>${area.value}</span> 
            <button>编辑</button>
            <button onclick="Delete(${list.children.length})" id='${list.children.length}'>删除</button>
        </li>`
        area.value='';
        }
        function Delete(index){
           document.getElementById(index+'').parentNode.remove();
        }
        

    </script>
</body>
</html>